import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { FieldWrapper } from '@ngx-formly/core';
import { ExpressionService } from '@core/services/expression/ExpressionService';

@Component({
  selector: 'formly-wrapper-fieldset',
  template: `
    <div apes-col [apesLg]="getDivCol()" [apesMd]="12" [apesSm]="24" [apesXs]="24" [ngStyle]="getStyle()">
      <apes-form-item class="apes-field-item">
        <!----------添加一层这样子可以为动态生成form产生间隙------------------->
        <div apes-row [apesType]="getDivFlex()" style="padding: 0 16px;">
          <apes-form-label *ngIf="to.label && to.hideLabel !== 'true'" apes-col [class.apes-col-fixed]="to.fieldFlex"
                           [ngStyle]="{'width': to.fieldFlex+'px'}" class="apes-field-label" [apesMd]="getLblCol()"
                           [apesXs]="6" [apesSm]="24" [apesRequired]="to.required">
            <span>{{to.label}}</span>
            <span *ngIf="getTooltip()"><i apes-icon apesType="info-circle" apes-tooltip
                                          [apesTooltipTitle]="tooltipTemplate"
                                          class="apes-form-label-tip"></i></span>
            <ng-template #tooltipTemplate>
              <span [innerHTML]="showTooltip()"></span>
            </ng-template>
            <span *ngIf="to.stepGuide" [id]="to.stepGuide"></span>
          </apes-form-label>
          <!-- [apesValidateStatus]="'error'" [apesHasFeedback]="true" -->
          <apes-form-control apes-col [class.apes-col]="to.fieldFlex" [apesMd]="getInputCol()" [apesXs]="18"
                             [apesSm]="24" class="apes-field-control" [apesValidateStatus]="showValidate(showError)">
            <ng-template #fieldComponent></ng-template>
            <!--<apes-form-explain *ngIf="validateForm.get('values').dirty&&validateForm.get('values').hasError('required')"></apes-form-explain>-->
            <div class="ui-message ui-messages-error" *ngIf="showError">
              <formly-validation-message [field]="field"></formly-validation-message>
            </div>
          </apes-form-control>
        </div>
      </apes-form-item>
    </div>
  `,
  host: {
    '[class.apes-formly-base]': 'true',
  },
  styles: [`
    @media (max-width: 480px) {
      .apes-field-item {
        margin-bottom: 0;
        max-height: none !important;
        min-height: 42px;
      }
    }

    .apes-field-item {
      margin-bottom: 0;
      max-height: 42px;
      min-height: 42px;
    }

    .apes-field-label {

    }

    .apes-form-label-tip {
      position: relative;
      top: 1px;
      padding: 2px;
      cursor: pointer;
    }

    .apes-form-label-tip:hover {
      color: #e6a23c;
    }

    .apes-field-control {
      /*max-height: 42px;*/
    }

    .ui-messages-error {
      height: 9px;
      line-height: 1;
      color: red;
      font-size: 10px;
      padding: 0 8px;
      position: relative;
      top: -1px;
    }
  `],
})
export class FormlyWrapperFieldset extends FieldWrapper {
  @ViewChild('fieldComponent', { read: ViewContainerRef, static: true }) fieldComponent: ViewContainerRef;

  // validateForm: FormGroup;
  // constructor(private fb: FormBuilder) {
  //   super();
  //   this.validateForm = this.fb.group({
  //     values : [ '', [ Validators.required ] ]
  //   });
  // }
  constructor(
    private expressionService: ExpressionService,
  ) {
    super();
  }

  showValidate(err) {
    return err ? 'error' : null;
  }

  getDivCol() {
    let value = this.model[this.key];
    let expression = this.to.divColFormatter;
    let divCol;
    if (expression) {
      divCol = this.expressionService.evaluate(expression, {
        context: this.formState,
        model: this.model,
        value: value,
      });
    }
    if (divCol == null) {
      divCol = this.to.col || this.to.divCol || 8;
    }

    return divCol;

    // return this.to.col || this.to.divCol || 8;
  }

  getLblCol() {
    if (this.to.fieldFlex) {
      return;
    } else {
      return this.to.lblCol || 6;
    }
  }

  getStyle() {
    if (this.to.style) {
      const obj = (new Function('return ' + this.to.style))();
      return obj;
    } else {
      return {};
    }
  }

  getInputCol() {
    if (this.to.fieldFlex) {
      return;
    } else {
      return this.to.inputCol || 18;
    }
  }

  getDivFlex() {
    return this.to.fieldFlex ? 'flex' : null; //fixed
  }

  getTooltip() {
    return !!this.to.tooltipFormatter;
  }

  showTooltip() {
    let value = this.model[this.key];
    let expression = this.to.tooltipFormatter || 'value';
    let tooltip = this.expressionService.evaluate(expression, {
      context: this.formState,
      model: this.model,
      value: value,
    }, true);
    if (tooltip == null) {
      tooltip = this.to.tooltipFormatter;
    }
    return tooltip;
  }

}
